<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>GetElementById的使用</title>
    <!--
        1.先得到 h1 的 dom 对象，通过 id 获取
        2.对 h1 对应的 dom 对象操作即可
    -->
    <script type="text/javascript">
      //myHeader 就是 header 对象
      // var myHeader = document.getElementById("myHeader");
      // alert(myHeader);  //null，从上到下执行的，还没有加载到，所以为null
      function getValue() {
        //myHeader 就是 header 对象
        var myHeader = document.getElementById("myHeader");
        //innerText 获取到myHeader标签包含的文本
        //innerText 和 innerHTML的区别
        alert(myHeader.innerText);  //文本
        alert(myHeader.innerHTML);  //html  <div>lmy</div>
      }

      //动态绑定
      window.onload = function() {
        //1.获取myHeader dom对象
        var myHeader = document.getElementById("myHeader");
        //2.给myHeader 绑定onclick事件
        myHeader.onclick = function() {
          alert("动态绑定 内容是=" + myHeader.innerText);  //文本
        }
      }

    </script>
  </head>

  <body>
<!--  静态绑定一个点击事件-->
  <h1 id="myHeader" onclick="getValue()"><div>lmy</div></h1>
    <p>Click on the header to alert its value</p>
  </body>
</html>